<template>
  <div class="toolbar_box">
    <div class="display_toolbar" @click="display = !display">
      <i :class="display ? 'el-icon-minus':'el-icon-plus'"></i>
    </div>
    <div class="toolbar">
      <el-collapse-transition>
        <div v-show="display">
          <div
            class="transition-box"
            v-for="(item,index) of toolbars"
            @click="select_toolbar(item,index)"
            v-bind:class="[item.cla]"
            :key="index"
          >
            <el-tooltip class="item" effect="dark" :content="item.title" placement="right">
              <i class="icon iconfont toolbar_icon" v-bind:class="[item.ico]"></i>
            </el-tooltip>
          </div>
          <el-tooltip class="item" effect="dark" content="选择颜色" placement="right">
            <el-color-picker v-model="color" size="mini" @change="changeColor"></el-color-picker>
          </el-tooltip>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    display: true,
    toolbarIndex: 0, // 当前选择工具的索引
    color: '#F51313', // 当前标记所使用的颜色值
    toolbars: [ // 工具栏所有的工具
      { title: "涂鸦", ico: "iconbianjisekuai", cla: "active" },
      { title: "矩形选框", ico: "iconsquare", cla: "" },
      { title: "圆形选框", ico: "iconyuan-copy", cla: "" },
      { title: "箭头", ico: "iconjiantou", cla: "" },
      { title: "线段", ico: "iconxian", cla: "" },
      { title: "文字", ico: "iconxingzhuang-wenzi", cla: "" },
      { title: "撤销", ico: "iconchehuisekuai", cla: "" },
      { title: "清空", ico: "icondelete", cla: "" }
    ]
  }),
  methods: {
    changeColor(val) { // 选择颜色发送给白板
      this.$emit('Color', val)
      console.log('选择了' + val + '颜色')
    },
    select_toolbar(item, i) { // 选择工具发送给白板
      this.$emit('toolbar', item)
      if (item.title == '撤销') {
        return;
      } else if (item.title == '清空') {
        return;
      } else { // 除了撤销和清空以外都可选中
        this.toolbars[this.toolbarIndex].cla = '';
        this.toolbars[i].cla = 'active';
        this.toolbarIndex = i;
      }
      console.log('选择了' + item.title + '工具', 'index：' + i)
    }
  }
}
</script>
<style scoped>
.toolbar_box {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 12;
}
.display_toolbar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  line-height: 35px;
  font-size: 22px;
  cursor: pointer;
}
.display_toolbar:hover {
  background-color: rgba(0, 0, 0, 0.6);
}
.toolbar {
  margin-top: 15px;
  height: 400px;
}
.toolbar_icon {
  display: inline-block;
  width: 35px;
  height: 35px;
}
.transition-box {
  margin-bottom: 5px;
  width: 35px;
  height: 35px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  line-height: 35px;
  cursor: pointer;
}
.select_color {
  margin-bottom: 5px;
  width: 35px;
  height: 35px;
  border-radius: 4px;
  background-color: #ccc;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  line-height: 35px;
  cursor: pointer;
}
.transition-box:hover {
  background-color: #409eff;
  color: white;
}
.active {
  background-color: #409eff;
  color: white;
}
</style>